<template>
  <div class="page">
    <Header></Header>
    <template v-if="!sended">
      <div class="text-wrap">
        <h1>快速创建知识店铺</h1>
        <h2>输入手机号，快速注册</h2>
      </div>
      <el-input ref="input" v-model="phone" @blur="blur" placeholder="手机号" clearable></el-input>
      <el-button class="tryout" type="primary" round @click="getCode">免费注册</el-button>
    </template>
    <template v-else>
      <div class="text-wrap">
        <h1>快速创建知识店铺</h1>
        <h2>输入验证码，完成注册</h2>
      </div>
      <div class="verify-box">
        <inputCode @complete="complete" :code.sync="code"></inputCode>
        <div class="btns">
          <span @click="sended=false">手机号不对？</span>
          <span
            @click="getCode"
            class="resend"
            :class="{'disabled':codeSendTime>0}"
          >重新发送{{codeSendTime>0?codeSendTime:''}}</span>
        </div>
      </div>

      <el-button class="tryout" type="primary" round @click="login">免费注册</el-button>
    </template>

    <div class="phone_wechat">
      <!-- <el-button round @click="tel" icon="iconfont icon-telephone" plain>&nbsp;电话咨询</el-button>
      <el-button
        round
        ref="copy"
        plain
        data-clipboard-action="copy"
        data-clipboard-text="mfucn118"
        icon="iconfont icon-gongzhonghao"
      >&nbsp;微信联系</el-button>-->
      <p>
        现在注册
        <br />立即赠送价值8000元功能大礼包
      </p>
      <ul>
        <li>
          <img src="~@/assets/img/img_5_12.png" alt />
          <div>微信公众号</div>
        </li>
        <li>
          <img src="~@/assets/img/img_5_13.png" alt />
          <div>微信小程序</div>
        </li>
        <li>
          <img src="~@/assets/img/img_5_4.png" alt />
          <div>支付宝小程序</div>
        </li>
        <li>
          <img src="~@/assets/img/img_5_1.png" alt />
          <div>抖音小程序</div>
        </li>
        <li>
          <img src="~@/assets/img/img_5_5.png" alt />
          <div>百度小程序</div>
        </li>
        <li>
          <img src="~@/assets/img/img_5_2.png" alt />
          <div>积分商城</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Header from "@/components/header";
import inputCode from "@/components/inputCode";

import config from "@/assets/js/config";
//import $ from "jquery";
import clipboard from "clipboard";

export default {
  name: "login",
  components: {
    Header,
    inputCode
  },
  data() {
    return {
      phone: "",
      codeSendTime: 0,
      sended: false,
      code: ""
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.input.focus();
      /* let clipb = new clipboard(this.$refs.copy.$el);
      clipb.on("success", () => {
        this.$message({
          message: "复制成功！快去添加您的专属客服吧！",
          type: "success"
        });
      });
      clipb.on("error", () => {
        this.$message({
          message: "复制失败！",
          type: "error"
        });
      }); */
    });
  },
  methods: {
    tel() {
      window.location.href = "tel:4009008819";
    },
    getCode() {
      if (!this.phone) {
        this.$message({
          message: "请填写手机号码",
          type: "warning"
        });
        return false;
      }
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$message({
          message: "手机号码有误，请重填",
          type: "warning"
        });
        return false;
      }
      var loading = this.$loading();
      $.ajax({
        url:
          config.pass_api_root +
          "/ajax?ugi=mfusignup&action=sendSignupSms&bundleid=cn.mfu.cloud",
        data: {
          phone: this.phone,
          moduleid: config.pass_api_root_moduleid
        },
        dataType: "jsonp",
        success: data => {
          loading.close();
          if (data.code != "A00006") {
            this.$message.error(data.errmsg);
            return;
          }
          this.$message.success("发送成功");
          this.sended = true;

          this.codeSendTime = 60;
          var timer = setInterval(() => {
            if (this.codeSendTime <= 0) {
              clearInterval(timer);
            } else {
              this.codeSendTime--;
            }
          }, 1000);
        }
      });
    },
    complete(e) {
      // this.code = e;
    },
    blur() {
      setTimeout(() => {
        window.scrollTo(0, document.body.scrollTop + 1);
        document.body.scrollTop >= 1 &&
          window.scrollTo(0, document.body.scrollTop - 1);
      }, 10);
    },
    login() {
      if (this.code.length !== 4) {
        this.$message({
          message: "请输入完整的验证码",
          type: "warning"
        });
        return;
      }
      var loading = this.$loading();
      $.ajax({
        url:
          config.pass_api_root +
          "/ajax?ugi=mfusignup&action=smssignup&bundleid=cn.mfu.cloud",
        data: {
          verify: this.code,
          phone: this.phone,
          moduleid: config.pass_api_root_moduleid,
          fromcode: this.$route.query.fromcode,
        },
        dataType: "jsonp",
        success: data => {
          loading.close();
          if (data.code != "A00006") {
            this.$message.error(data.errmsg);
            return;
          }
          this.$message.success("领取成功");
          setTimeout(() => {
            this.$router.push({ name: "successful" });
          }, 1000);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  padding: 0 30px;
  .text-wrap {
    padding: 40px 0 30px;
    text-align: left;
    h1 {
      color: #2a2a2a;
      font-size: 23px;
      line-height: 40px;
      font-weight: 500;
    }
    h2 {
      color: #727272;
      font-weight: 300;
      font-size: 18px;
    }
  }
  ::v-deep .el-input {
    input {
      border-width: 0 0 1px 0;
      border-radius: 0;
      padding: 0;
      font-size: 16px;
      height: 50px;
    }
  }
  .tryout.el-button {
    margin-top: 50px;
    width: 100%;
    padding: 16px 0;
    border-radius: 100px;
  }

  .phone_wechat {
    margin-top: 30px;
    .el-button {
      color: #03bf86;
      border-color: #dcdfe6 !important;
      &:last-child {
        color: #1699fa;
      }
    }

    p {
      color: #fe8406;
      font-size: 16px;
      line-height: 1.6;
      margin-bottom: 16px;
      text-align: center;
      font-weight: 500;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;

      li {
        margin-bottom: 12px;
        width: 33.33%;
        font-size: 12px;
        text-align: center;
        color: #353535;

        img {
          width: 34px;
          margin-bottom: 4px;
        }
      }
    }
  }
}
.verify-box {
  position: relative;
  width: 340px;
  margin: auto;
  max-width: 95%;
  .btns {
    padding: 13px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 55px;
    left: 0px;
    width: 100%;
    span {
      color: #999999;
      cursor: pointer;
      &.resend {
        color: #4797f3;
        &.disabled {
          pointer-events: none;
          opacity: 0.5;
        }
      }
    }
  }
}
</style>